<template>
	<view class="detail">
			
			<image class="img" :src="parkde.img" mode=""></image>
			<text class="companyName">{{parkde.parkName}}</text>
			
			<text class="introductory">距离 : {{parkde.distance}}</text>
			<text class="introductory">封顶价格 : {{parkde.priceCaps}}元</text>
			<text class="introductory">收费 : {{parkde.rates}}元</text>
			<text class="introductory">总停车位 : {{parkde.allPark}}个</text>
			<text class="introductory">目前空车位 : {{parkde.vacancy}}个</text>
		    <text class="introductory">{{parkde.opens}}</text>
		    <text class="introductory">地址 : {{parkde.address}}</text>
	        <view class="page-section">
	        	<map :latitude="39.909" :longitude="116.39742" style="width: 100%; height: 300px;"></map>
	        </view>
	</view>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue';
import {getparkdetail} from  '../../../api/parkApi.js'
import {baseurl} from '../../../api/request.js'
import {tingde} from '@/mock/park.js'
import {onLoad} from '@dcloudio/uni-app'

const id= ref()       //停车场id
const parkde=ref({})  //停车场详情

//封装判断图片是空的
function checkimg(imgsrc){
	let img =new Image()  //图片的实力对象 
	img.src=imgsrc        //把地址给图片的对象
	
	//图片的宽高为0证明图片为空 返回默认的图片
	if (img.naturalWidth === 0 || img.naturalWidth === 0) {
		 return '../../../static/center4/comm.webp'
	} 
}

//停车场详情
const getparkdetaildata=async()=>{
	
	   // id.value = getCurrentInstance().attrs.id
	  console.log(id.value)
	   
	 let res = await getparkdetail({
		 id:id.value,
		 data:{}
	 })
  
	 if(res.code==200){
		 
		 res.data.img=checkimg(baseurl+res.data.imgUrl)
		 res.data.opens=(res.data.open=="Y")?'外来车辆可以停':'外来车辆不可以停'
		 parkde.value=res.data
		
	   }else{
		   //模拟数据
		   parkde.value=tingde(id.value)[0]
		   
	   }
	 console.log(parkde.value);  
   }
	   
	onLoad((option)=>{
		id.value = option.id
		getparkdetaildata()
	})   
	   
	   
// onMounted(()=>{
// 	getparkdetaildata()
	 
// })
</script>
<style lang="scss">

.detail{
	display: flex;
	flex-direction: column;	
	padding:0px 10px;
	background-color: #dbecf1;
	
   .img{
  		width: 100%;
  		}
   .companyName{
  			font-size:20px;
  			font-weight: 700;
  			margin: 16px 0px;
  		}
		
	.introductory{
		line-height: 36px;
		font-size:18px;
		font-weight: 700;
		color: #595959;
	}
	.page-section{
	  margin: 10px 0px;	
	}


}


</style>
